<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
<head>
	<style>
	#index_big_photo_div
	{
		height:300px;
		width:650px;
	}
	#index_big_photo
	{
		float:left;
		margin:2px;
		margin-left:0px;
		width:648px;
		height:296px;
		background-color:#eee;
		display:inline;
	}
	#index_below_big_photo
	{
		border-top:1px dashed #999;
		width:650px;
	}
	#photos_titlebar
	{
		height:20px;
		margin-top:2px;
		background:#89CFE7 url(view/blue/images/right_block_title_bg.jpg) 0px -1px repeat-x; 
	}
	.index_photos_list_div
	{
		height:95px;
		background-color:#ddd;
		background:#89CFE7 url(view/blue/images/index_photo_list_title_bg.jpg) 0px -1px repeat-x; 
	}
	.index_photos_list_wrapper
	{
		height:93px;
		/*border:1px solid #999;*/
		margin-left:30px;
		background-color:#fff;
	}
	.index_photos_list_title
	{
		width:30px;
		height:93px;
		float:left;
		display:inline;
	}
	.index_photos_list_title td { font-size:16px;}
	.index_photo_item
	{
		background-color:#777;
		float:left;
		display:inline;
		width:100px;
		height:80px;
		margin:5px 0px;
		margin-left:22px;
	}
	#index_big_photo_footer,#index_big_photo_footer_bg
	{
		background-color:#000;
		height:40px;
		margin-top:256px;
		position:absolute;
	}
	#index_big_photo_img
	{
		position:absolute;
		z-index:5;
		background-color:transparent;
	}
	.footer_img
	{
		float:right;
		margin:5px;
		height:28px;
		width:61px;
		border:1px solid #333;
		margin-left:0px;
		cursor:pointer;
	}
	.img_on ,.img_over{ border-color:#fff; }
	</style>
	<!-- INCLUDE meta.html -->
<script>
	var index_big_photos = {index_big_photos_json};
	var big_photo_index = 0;
	var index_big_photo_indexes = [];
	var total_photos = 9;
	var t = 0;
	var change_photo_time = 20000; //ms
	function change_photo()
	{
		$('div.img_on').each(function()
		{
			var o = (this.previousSibling)?this.previousSibling:this.parentNode.lastChild;
			$(o).trigger('click');
		});
	}
	
	$(function()
	{
		$('#index_big_photo_img').css(
		{
			height:$('#index_big_photo').height(),
			width:$('#index_big_photo').width(),
			opacity:0
		});
		$('#index_big_photo_footer_bg').css(
		{
			opacity:0,
			zIndex:6,
			width:$('#index_big_photo').width()
		});
		$('#index_big_photo_footer').css(
		{
			backgroundColor:'transparent',
			opacity:0,
			zIndex:7,
			width:$('#index_big_photo').width()
		});
		var t = 0;
		while(t<total_photos && t<index_big_photos.length)
		{
			big_photo_index = parseInt(Math.random()*index_big_photos.length);
			//if has this photo
			if (index_big_photo_indexes[big_photo_index]) continue;
			index_big_photo_indexes[big_photo_index] = true;
			var pre = new Image();
			pre.src = index_big_photos[big_photo_index].file_path;
			var img = document.createElement('div');
			$(img)
				.addClass('footer_img')
				.css('background','#333 url('+index_big_photos[big_photo_index].small+') no-repeat 50% 50%')
				.css( { opacity:0.6 })
				.attr('img_on','no')
				.attr('file_path',index_big_photos[big_photo_index].file_path)
				.mouseover(function()
				{
					$(this).fadeTo(200,1).addClass('img_over');
				})
				.mouseout(function()
				{
					$(this).removeClass('img_over');
					if (!$(this).hasClass('img_on'))
					{
						$(this).fadeTo(200,0.7);
					}
				})
				.click(function()
				{
					try{ clearTimeout(window.photo_timer); }catch(e){  }
					$('div.img_on').removeClass('img_on').fadeTo(200,0.7);
					
					var file_path = $(this)
						.attr('img_on','yes')
						.css({ opacity:1 })
						.addClass('img_on')
						.attr('file_path');
						
					$('#index_big_photo_img')
					.css( 
					{ 
						background:'transparent url('+ file_path +') no-repeat 50% 50%'
					}).fadeTo(300,1,function()
					{
						$('#index_big_photo').css( 
						{ 
							background:'#eee url('+ file_path +') no-repeat 50% 50%'
						});
						$('#index_big_photo_img').css({ opacity:0 });
					});
					window.photo_timer = setTimeout(change_photo,window.change_photo_time);
				});
			$('#index_big_photo_footer').append(img);
			t++;
		}
		$(img).addClass('img_on').css({ opacity:1 });
		$('#index_big_photo').css( 
		{ 
			background:'#eee url('+ $(img).attr('file_path') +') no-repeat 50% 50%'
		});
		window.photo_timer = setTimeout(change_photo,window.change_photo_time);
	});
	
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id='topdiv'>
	<!-- INCLUDE header.html -->
	<div id='content'>
	    <div id='maindiv'>
	       	<div id='index_big_photo_div'>
				<div id='index_big_photo'>
					<div id='index_big_photo_img'></div>
					<div id='index_big_photo_footer'></div>
					<div id='index_big_photo_footer_bg'></div>
				</div>
			</div>
			<div id='index_below_big_photo'>
				<div id='photos_titlebar'></div>
				<div class='index_photos_list_div'>
					<div class="index_photos_list_title">
						<table width="100%" height="100%">
							<tr valign="middle"><td align="center">{MOST_DOWNLOAD}</td></tr>
						</table>
					</div>
					<div class='index_photos_list_wrapper'>
						<!-- BEGIN most_downloaded -->
						<a href="./?{photo_id}" title="{title}	
													
{description}">
							<div class="index_photo_item" style="cursor:pointer;background:#ffffff url(image.php?path={big}&max=100&method=box) 50% 50% no-repeat;"></div>
						</a>
						<!-- END -->
					</div>
				</div>
                
                
                
				<div class='index_photos_list_div'>
					<div class="index_photos_list_title">
						<table width="100%" height="100%">
							<tr valign="middle"><td align="center">{NEWLY_UPLOADED}</td></tr>
						</table>
					</div>
					<div class='index_photos_list_wrapper'>
						<!-- BEGIN newly_uploaded -->
                      <a href="./?{photo_id}" title="{title}								
						
{description}">
							<div class="index_photo_item" style="cursor:pointer;background:#ffffff url(image.php?path={big}&max=100&method=box) 50% 50% no-repeat;"></div>
						</a>
						<!-- END -->
					</div>
				</div>

			</div>
	    </div>
		<div id='right'>
			<!-- INCLUDE right.html -->
		</div>
	</div>

	<!-- INCLUDE footer.html -->


</div>


</body>
</html>